import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, InputNumber } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import type { InputNumberProps } from 'antd';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

/**
 * 快速写作功能
 * 根据关键词和类型快速生成文章大纲或内容
 */
const QuickWritingPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [characterCount, setCharacterCount] = useState<number | string>(500);
  const [tourVisible, setTourVisible] = useState<boolean>(false);

  // 创建ref引用
  const keywordsRef = useRef<HTMLDivElement>(null);
  const writingTypeRef = useRef<HTMLDivElement>(null);
  const characterCountRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  // 组织ref引用
  const tourRefs = {
    keywords: keywordsRef,
    writingType: writingTypeRef,
    characterCount: characterCountRef,
    generateButton: generateButtonRef,
    result: resultRef
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'keywords',
      title: '输入关键词',
      description: '请输入您想要写作的关键词，多个关键词用逗号分隔',
    },
    {
      key: 'writingType',
      title: '选择写作类型',
      description: '选择您需要生成的内容类型，如文章大纲、引言部分等',
    },
    {
      key: 'characterCount',
      title: '设置内容长度',
      description: '调整您期望生成内容的字符数限制',
    },
    {
      key: 'generateButton',
      title: '生成内容',
      description: '点击此按钮开始AI内容生成过程',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成完成后，您可以在此处查看、复制或下载生成的内容',
    },
  ];

  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 写作类型选项
  const writingTypes = [
    { value: 'outline', label: '文章大纲' },
    { value: 'introduction', label: '引言部分' },
    { value: 'mainBody', label: '主体内容' },
    { value: 'conclusion', label: '结论总结' },
  ];

  // 处理表单提交，生成内容
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const keywords = values.keywords || '';
      const writingType = values.writingType || 'outline';

      if (!keywords.trim()) {
        message.warning('请输入关键词');
        return;
      }

      setLoading(true);
      setGeneratedContent('');

      // 模拟API调用延迟
      setTimeout(() => {
        const content = generateArticle(keywords, writingType, characterCount);
        setGeneratedContent(content);
        setLoading(false);
        message.success('内容生成成功！');
      }, 2000);
    } catch (error) {
      setLoading(false);
      message.error('生成失败，请重试');
    }
  };

  // 生成文章的模拟函数
  const generateArticle = (keywords: string, type: string, count: number | string): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result: any = '';

    // 将关键词分割成数组
    const keywordArray = keywords.split(',').map(keyword => keyword.trim()).filter(keyword => keyword);

    if (keywordArray.length === 0) {
      return '请输入有效的关键词';
    }

    switch (type) {
      case 'outline':
        result = `# ${keywordArray[0]} 文章大纲\n\n`;
        result += `## 一、引言\n`;
        result += `1.1 ${keywordArray[0]}的背景和重要性\n`;
        result += `1.2 本文研究内容和目标\n`;
        result += `1.3 研究方法和结构安排\n\n`;

        result += `## 二、${keywordArray[0]}的理论基础\n`;
        result += `2.1 ${keywordArray[0]}的概念界定\n`;

        if (keywordArray.length > 1) {
          result += `2.2 ${keywordArray[1]}相关理论综述\n`;
        }
        result += `2.3 ${keywordArray[0]}的研究现状\n\n`;

        result += `## 三、${keywordArray[0]}的实践应用\n`;
        result += `3.1 ${keywordArray[0]}在行业中的应用案例\n`;

        if (keywordArray.length > 1) {
          result += `3.2 ${keywordArray[1]}与${keywordArray[0]}的结合应用\n`;
        }
        result += `3.3 应用效果分析\n\n`;

        result += `## 四、存在问题与解决方案\n`;
        result += `4.1 当前${keywordArray[0]}应用中存在的主要问题\n`;
        result += `4.2 针对问题的解决方案\n`;
        result += `4.3 未来发展建议\n\n`;

        result += `## 五、结论与展望\n`;
        result += `5.1 主要研究结论\n`;
        result += `5.2 研究局限性\n`;
        result += `5.3 未来研究方向`;
        break;

      case 'introduction':
        result = `随着社会的不断发展和科技的快速进步，${keywordArray[0]}已经成为当今时代的重要议题。在全球化和信息化的背景下，${keywordArray[0]}对于推动经济发展、促进社会进步、提高人们生活质量具有不可忽视的作用。\n\n`;

        if (keywordArray.length > 1) {
          result += `与此同时，${keywordArray[1]}作为${keywordArray[0]}的重要组成部分，其发展也受到了广泛关注。${keywordArray[1]}不仅丰富了${keywordArray[0]}的内涵，也为${keywordArray[0]}的实践应用提供了新的思路和方法。\n\n`;
        }

        result += `本文旨在对${keywordArray[0]}进行系统的研究和分析，探讨其发展现状、存在问题及未来趋势。通过对相关文献的梳理和实际案例的分析，本文试图揭示${keywordArray[0]}的本质特征和发展规律，为相关领域的研究和实践提供参考和借鉴。\n\n`;
        result += `本文的结构安排如下：首先，介绍${keywordArray[0]}的基本概念和研究背景；其次，分析${keywordArray[0]}的发展现状和存在问题；然后，探讨解决这些问题的方法和途径；最后，总结研究成果，展望未来发展方向。`;
        break;

      case 'mainBody':
        result = `## ${keywordArray[0]}的发展现状\n\n`;
        result += `### 2.1 ${keywordArray[0]}的概念与内涵\n`;
        result += `${keywordArray[0]}是指...（详细阐述${keywordArray[0]}定义、特点和分类等）。\n\n`;

        result += `### 2.2 ${keywordArray[0]}的发展历程\n`;
        result += `${keywordArray[0]}的发展大致可以分为三个阶段：第一阶段是起步阶段（时间范围），主要特点是...；第二阶段是快速阶段（时间范围），主要特点是...；第三阶段是成熟阶段（时间范围），主要特点是...。\n\n`;

        result += `### 2.3 ${keywordArray[0]}的研究现状\n`;
        result += `目前，国内外学者对${keywordArray[0]}的研究主要集中在以下几个方面：\n`;
        result += `1. ${keywordArray[0]}理论研究：主要探讨${keywordArray[0]}基本原理、理论框架和方法论等；\n`;

        if (keywordArray.length > 1) {
          result += `2. ${keywordArray[0]}与${keywordArray[1]}关系研究：主要分析${keywordArray[1]}对${keywordArray[0]}的影响和作用；\n`;
        }
        result += `3. ${keywordArray[0]}应用研究：主要探索${keywordArray[0]}在实际场景中的应用方法和效果。\n\n`;

        result += `### 2.4 ${keywordArray[0]}的发展趋势\n`;
        result += `未来，${keywordArray[0]}的发展将呈现以下趋势：\n`;
        result += `1. 技术化趋势：随着相关技术的不断进步，${keywordArray[0]}的技术含量将不断提高；\n`;
        result += `2. 融合化趋势：${keywordArray[0]}将与其他领域深度融合，形成新的发展模式；\n`;
        result += `3. 国际化趋势：${keywordArray[0]}的研究和应用将更加国际化，国际合作将不断加强。`;
        break;

      case 'conclusion':
        result = `## 结论与展望\n\n`;
        result += `### 5.1 主要研究结论\n`;
        result += `通过对${keywordArray[0]}系统研究和分析，本文得出以下主要结论：\n`;
        result += `1. ${keywordArray[0]}是一个复杂的系统工程，涉及多个学科和领域；\n`;

        if (keywordArray.length > 1) {
          result += `2. ${keywordArray[1]}在${keywordArray[0]}的发展中发挥着重要作用；\n`;
        }
        result += `3. 尽管目前${keywordArray[0]}的研究和应用取得了一定成果，但仍存在一些问题和挑战。\n\n`;

        result += `### 5.2 研究局限性\n`;
        result += `本文的研究还存在一些局限性：\n`;
        result += `1. 由于数据和时间的限制，本文的研究样本可能不够全面；\n`;
        result += `2. 对${keywordArray[0]}的深层次机理研究还不够深入；\n`;
        result += `3. 实证研究和案例分析还不够充分。\n\n`;

        result += `### 5.3 未来研究方向\n`;
        result += `未来，${keywordArray[0]}的研究可以从以下几个方面展开：\n`;
        result += `1. 加强理论研究，完善${keywordArray[0]}的基础理论；\n`;
        result += `2. 深化实证研究，提高研究结果的可靠性和实用性；\n`;
        result += `3. 拓展应用领域，推动${keywordArray[0]}在更多场景中的应用；\n`;
        result += `4. 加强国际合作，促进${keywordArray[0]}研究的国际化发展。`;
        break;

      default:
        result = `基于关键词${keywords}生成的内容。这里是模拟生成的文本，实际应用中应该调用AI模型生成更丰富、更准确的内容。`;
        break;
    }

    // 根据指定的字数进行调整
    if (result.length > count) {
      result = result.substring(0, count) + '...';
    }

    return result;
  };

  // 复制生成的内容
  const handleCopy = () => {
    if (!generatedContent) {
      message.warning('没有可复制的内容');
      return;
    }

    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    if (!generatedContent) {
      message.warning('没有可下载的内容');
      return;
    }

    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '生成内容.txt';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    message.success('内容已下载');
  };

  // 字符数变化处理
  const handleCharacterCountChange: InputNumberProps['onChange'] = (value) => {
    if (value !== null) {
      setCharacterCount(value);
    }
  };

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Typography>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Title level={1}>快速写作<TourGuideButton onClick={showTour} /></Title>
          </div>
          <Paragraph>
            输入关键词，选择写作类型，AI将快速生成文章大纲或内容。
          </Paragraph>
        </Typography>

        <Row gutter={[16, 16]}>
          <Col xs={24} lg={12}>
            <Card title="写作设置" size="small">
              <Form
                form={form}
                layout="vertical"
              >
                <Form.Item
                  label="关键词"
                  name="keywords"
                  rules={[{ required: true, message: '请输入关键词' }]}
                >
                  <div ref={keywordsRef}>
                    <TextArea
                      rows={3}
                      placeholder="请输入关键词，多个关键词用逗号分隔"
                      maxLength={500}
                      showCount
                    />
                  </div>
                </Form.Item>

                <Form.Item
                  label="写作类型"
                  name="writingType"
                  initialValue="outline"
                >
                  <div ref={writingTypeRef}>
                    <Select style={{ width: '100%' }}>
                      {writingTypes.map(type => (
                        <Option key={type.value} value={type.value}>
                          {type.label}
                        </Option>
                      ))}
                    </Select>
                  </div>
                </Form.Item>

                <Form.Item label="内容长度限制">
                  <div ref={characterCountRef}>
                    <InputNumber
                      min={100}
                      max={5000}
                      step={100}
                      value={characterCount}
                      onChange={handleCharacterCountChange}
                      style={{ width: '100%' }}
                      addonAfter="字符"
                    />
                  </div>
                </Form.Item>

                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button
                      type="primary"
                      onClick={handleSubmit}
                      loading={loading}
                      block
                    >
                      {loading ? '生成中...' : '生成内容'}
                    </Button>
                  </div>
                </Form.Item>
              </Form>
            </Card>
          </Col>

          <Col xs={24} lg={12}>
            <Card title="生成结果" size="small" ref={resultRef}>
              {loading ? (
                <div style={{ textAlign: 'center', padding: '60px 0' }}>
                  <Spin size="large" />
                  <p style={{ marginTop: '16px' }}>正在生成内容，请稍候...</p>
                </div>
              ) : generatedContent ? (
                <div>
                  <div style={{
                    backgroundColor: '#f5f5f5',
                    padding: '16px',
                    borderRadius: '4px',
                    minHeight: '300px',
                    whiteSpace: 'pre-wrap',
                    wordBreak: 'break-word'
                  }}>
                    {generatedContent}
                  </div>
                  <div style={{ marginTop: '16px', textAlign: 'right' }}>
                    <Button
                      type="primary"
                      icon={<CopyOutlined />}
                      onClick={handleCopy}
                      style={{ marginRight: '8px' }}
                    >
                      复制内容
                    </Button>
                    <Button
                      icon={<DownloadOutlined />}
                      onClick={handleDownload}
                    >
                      下载内容
                    </Button>
                  </div>
                </div>
              ) : (
                <div style={{ textAlign: 'center', padding: '60px 0', color: '#999' }}>
                  生成结果将显示在这里
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      /></>
  );
};

export default QuickWritingPage;